import { VFC, Suspense, lazy, LazyExoticComponent } from "react";
import { Router as Rter, useHistory, Route as Rt, Link, withRouter, Switch, RouteProps, RouteComponentProps, Redirect } from 'react-router-dom';
import { Wait, Header } from '@common';
import { PageLoading } from 'zw-components';
import style from './index.module.less';

const Router: any = Rter;
const Route: any = Rt;
const SummaryPage = lazy(() => {
    return Promise.all([import('../summary/index'), Wait(500)]).then(res => res[0]);
});
const PhotoPage = lazy(() => {
    return Promise.all([import('../photo/index'), Wait(500)]).then(res => res[0]);
});
const PicturePage = lazy(() => {
    return Promise.all([import('../picture/index'), Wait(500)]).then(res => res[0]);
});
const FilePage = lazy(() => {
    return Promise.all([import('../file/index'), Wait(500)]).then(res => res[0]);
});
const ArticlePage = lazy(() => {
    return Promise.all([import('../article/index'), Wait(500)]).then(res => res[0]);
});
const UserInfoPage = lazy(() => {
    return Promise.all([import('../user-info/index'), Wait(500)]).then(res => res[0]);
});
const ProxyPage = lazy(() => {
    return Promise.all([import('../proxy/index'), Wait(500)]).then(res => res[0]);
});
export const Main: VFC<RouteComponentProps> = (props) => {
    let history = useHistory();
    const pathName = props.match.path.replace('/*', '');
    return (
        <div className={style.container}>
            <Header />
            <div className={style.content}>
                <Suspense fallback={<PageLoading />}>
                    <Router history={history}>
                        <Switch>
                            <Route exact path={pathName + '/summary'} component={SummaryPage} />
                            <Route exact path={pathName + '/photo'} component={PhotoPage} />
                            <Route exact path={pathName + '/picture'} component={PicturePage} />
                            <Route exact path={pathName + '/file'} component={FilePage} />
                            <Route exact path={pathName + '/article'} component={ArticlePage} />
                            <Route exact path={pathName + '/userInfo'} component={UserInfoPage} />
                            <Route exact path={pathName + '/proxy'} component={ProxyPage} />
                            <Route exact path={pathName + '/proxy/*'} component={ProxyPage} />
                            <Redirect to='/404' />
                        </Switch>
                    </Router>
                </Suspense>
            </div>
        </div>
    );
}
export default Main;